import 'package:flutter/material.dart';
import 'package:flutter_staggered_grid_view/flutter_staggered_grid_view.dart';
import 'package:xinxuan/common/appbar_util.dart';
import 'package:xinxuan/common/bar_util.dart';
import 'package:xinxuan/common/button_util.dart';
import 'package:xinxuan/common/network_image_util.dart';
import 'package:xinxuan/controllers/my_commodity_controller/my_commodity_page_controller.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:xinxuan/router/app_routers.dart';
import 'package:xinxuan/utils/color_util.dart';
import 'package:xinxuan/utils/refresh_util.dart';
import 'package:xinxuan/vo/common_vo/common_seckill_detail_data_vo.dart';
import 'package:get/get.dart';

class MyCommodityPage extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: pageBgColor,
      appBar: AppBarUtil(
        title: '我的商品',
      ),
      body: GetBuilder<MyCommodityPageController>(
        init: MyCommodityPageController(),
        builder: (controller) {
          if (controller.seckillMyCommodityListVo.value.data!.length <= 0) {
            return Center(
              child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  Image.asset(
                    'assets/icons/icon_my_commodity_def.png',
                    width: 273.w,
                    height: 146.h,
                  ),
                  Text(
                    '暂无没有商品哦~',
                    style: TextStyle(
                      color: textSubtitleColor,
                      fontSize: 14.sp
                    ),
                  )
                ],
              ),
            );
          }
          return Column(
            children: [
              BarUtil(title: '我的商品库'),
              Expanded(child: RefreshUtil.easyRefresh(
                scrollController: controller.scrollController,
                onRefresh: () async {
                  controller.getMyCommodityList();
                },
                onLoad: () async {
                  controller.onloadMyCommodityList();
                },
                slivers: [
                  SliverToBoxAdapter(
                    child: Container(
                      padding: EdgeInsets.symmetric(horizontal: 16.w),
                      child: StaggeredGridView.countBuilder(
                        padding: EdgeInsets.zero,
                        physics: NeverScrollableScrollPhysics(),
                        shrinkWrap: true,
                        crossAxisCount: 4,
                        itemCount: controller.seckillMyCommodityListVo.value.data!.length,
                        staggeredTileBuilder: (int index) => StaggeredTile.fit(2),
                        mainAxisSpacing: 12.h,
                        crossAxisSpacing: 13.w,
                        itemBuilder: (BuildContext context, int index) {
                          CommonSeckillDetailDataVo item = controller.seckillMyCommodityListVo.value.data![index];
                          return Container(
                            width: 165.w,
                            decoration: BoxDecoration(
                              borderRadius: BorderRadius.circular(5.w),
                              color: bgWhiteColor
                            ),
                            child: Column(
                              crossAxisAlignment: CrossAxisAlignment.start,
                              children: [
                                NetworkImageUtil(
                                  url: item.image ?? '', 
                                  width: 165.w, 
                                  height: 165.w,
                                  topLeftRadius: 5.w,
                                  topRightRadius: 5.w,
                                ),
                                Container(
                                  padding: EdgeInsets.symmetric(horizontal: 6.w),
                                  child: Column(
                                    crossAxisAlignment: CrossAxisAlignment.start,
                                    children: [
                                      SizedBox(height: 12.h),
                                      Text(
                                        '${item.title}',
                                        overflow: TextOverflow.ellipsis,
                                        maxLines: 2,
                                        style: TextStyle(
                                          color: textBlackColor,
                                          fontSize: 14.sp,
                                          fontWeight: FontWeight.bold
                                        ),
                                      ),
                                      SizedBox(height: 6.h),
                                      Text.rich(
                                        TextSpan(
                                          text: '价格：',
                                          style: TextStyle(
                                            color: mainTextColor,
                                            fontSize: 12.sp,
                                            fontWeight: FontWeight.bold
                                          ),
                                          children: [
                                            TextSpan(
                                              text: '¥',
                                              style: TextStyle(
                                                color: mainTextColor,
                                                fontSize: 12.sp,
                                                fontWeight: FontWeight.bold
                                              )
                                            ),
                                            TextSpan(
                                              text: '${item.price}',
                                              style: TextStyle(
                                                color: mainTextColor,
                                                fontSize: 16.sp,
                                                fontWeight: FontWeight.bold
                                              )
                                            )
                                          ]
                                        )
                                      ),
                                      SizedBox(height: 12.h),
                                      item.status == 1 ? ButtonUtil(
                                        text: '${item.statusStr}', 
                                        fontSize: 14.sp, 
                                        borderRadius: 20.w, 
                                        height: 30.h, 
                                        onTop: () {
                                          Get.toNamed(
                                            '${AppRouters.COMMON_PAGE}${AppRouters.MY_COMMODITY_PAGE}${AppRouters.REPLACEMENT_SHEL_PAGE}',
                                            arguments: {
                                              'productId': item.productId,
                                              'holderId': item.id
                                            }
                                          )!.then((res) {
                                            controller.scrollController.jumpTo(0);
                                            controller.getMyCommodityList(loading: false);
                                          });
                                        }
                                      ) : Opacity(
                                        opacity: .5,
                                        child: ButtonUtil(
                                          text: '${item.statusStr}', 
                                          fontSize: 14.sp, 
                                          borderRadius: 20.w, 
                                          height: 30.h, 
                                          onTop: () {}
                                        ),
                                      ),
                                      SizedBox(height: 10.h),
                                      ButtonUtil(
                                        text: '确认提货', 
                                        fontSize: 14.sp, 
                                        borderRadius: 20.w, 
                                        height: 30.h, 
                                        textColor: textBlackColor,
                                        bgColors: [
                                          bgDisplayColor,
                                          bgDisplayColor
                                        ],
                                        onTop: () {}
                                      ),
                                      SizedBox(height: 10.h),
                                      ButtonUtil(
                                        text: '兑换购物金', 
                                        fontSize: 14.sp, 
                                        borderRadius: 20.w, 
                                        height: 30.h, 
                                        textColor: textBlackColor,
                                        bgColors: [
                                          bgDisplayColor,
                                          bgDisplayColor
                                        ],
                                        onTop: () {}
                                      ),
                                      SizedBox(height: 12.h),
                                    ],
                                  ),
                                )
                              ],
                            ),
                          );
                        },
                      ),
                    ),
                  )
                ]
              ))
            ],
          );
        },
      ),
    );
  }
}